<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://www.springframework.org/security/tags"
	prefix="sec"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Telomere</title>
<link rel="shortcut icon" href="<%=path%>/img/logo.png">

<!-- Vendor CSS -->
<link
	href="<%=path%>/vendors/bower_components/animate.css/animate.min.css"
	rel="stylesheet">
<link
	href="<%=path%>/vendors/bower_components/sweetalert2/dist/sweetalert2.min.css"
	rel="stylesheet">
<link
	href="<%=path%>/vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css"
	rel="stylesheet">
<link
	href="<%=path%>/vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.min.css"
	rel="stylesheet">
<link href="<%=path%>/vendors/bower_components/chosen/chosen.css"
	rel="stylesheet">
<link href="<%=path%>/css/jquery.datetimepicker.css" rel="stylesheet" />

<!-- CSS -->
<link href="<%=path%>/css/app_1.min.css" rel="stylesheet">
<link href="<%=path%>/css/app_2.min.css" rel="stylesheet">
<link href="<%=path%>/css/custom.css" rel="stylesheet">
<link href="<%=path%>/css/box.css" rel="stylesheet">
</head>

<body>
	<%@ include file="../header.jsp"%>
	<section id="main">
		<%@ include file="../sidebar.jsp"%>
		<section id="content">
			<div class="container">
				<div class="block-header">
					<h2>查询</h2>
				</div>
				<div class="card">
					<div class="card-header">
						<h2>填写查询条件</h2>
					</div>
					<div class="card-body card-padding">
						<form class="row" method="post"
							action="<%=path%>/telo!startPage.action" id="form-query">
							<s:hidden name="pageCurrent" id="pCurrent" />
							<s:hidden name="pageMax" id="pMax" />
							<div class="col-sm-2">
								<div class="form-group fg-line">
									<input type="text" class="form-control fg-input"
										placeholder="内部编号" name="tort.internal_id"
										value="<s:property value='tort.internal_id'/>">
								</div>
							</div>
							<div class="col-sm-2">
								<div class="form-group fg-line">
									<input type="text" class="form-control fg-input"
										placeholder="姓名" name="tort.name"
										value="<s:property value='tort.name'/>">
								</div>
							</div>
							<div class="col-sm-4">
								<div class="form-group input-group">
									<div class="fg-line">
										<input type="text" class="form-control fg-input"
											id="datepicker_start" placeholder="起始录入日期" name="startDate"
											value="<s:property value='startDate'/>">
									</div>
									<span class="input-group-addon last"><i
										class="zmdi zmdi-calendar"></i></span>
								</div>
							</div>

							<div class="col-sm-3">
								<div class="form-group input-group">
									<div class="fg-line">
										<input type="text" class="form-control fg-input"
											id="datepicker_end" placeholder="终止录入日期" name="endDate"
											value="<s:property value='endDate'/>">
									</div>
									<span class="input-group-addon last"><i
										class="zmdi zmdi-calendar"></i></span>
								</div>
							</div>

							<div class="col-sm-1">
								<button type="submit" class="btn bgm-green"><i class="zmdi zmdi-search-for"></i> 查 询</button>
							</div>
						</form>
					</div>
					
					<div class="div-divider"></div>
					
					<div class="card-header">
                    	<h2>每页最多 <span class="redInfo"><s:property value="pageSize" /></span> 条，当前页 <span class="redInfo"><s:property value="trlist.size()" /></span> 条，共 <span class="redInfo"><s:property value="pageMax" /></span> 页 </h2> 
					</div>
					<div class="div-table-margin">
						<div class="table-responsive">
							<table class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                	<th>内部编号</th>
                                    <th>姓名</th>
                                    <th>性别</th>
                                    <th>出生日期</th>
                                    <th>年龄</th>
                                    <th>样本类型</th>
                                    <th>联系电话</th>
                                    <th>端粒长度</th>
                                    <th>检测日期</th>
                                    <th>报告日期</th>
                                    <th>查看详情</th>
                                    <th>下载报告</th>
                                </tr>
                                </thead>
                                <tbody>
                                <s:iterator value="trlist" >
                                	<tr>
                                    	<td><s:property value="internal_id"/></td>
                                    	<td><s:property value="name"/></td>
                                    	<td><s:property value="gender"/></td>
                                    	<td><s:date name="dob" format="yyyy-MM-dd"/></td>
                                    	<td><s:property value="age"/></td>
                                    	<td><s:property value="sample_type"/></td>
                                    	<td><s:property value="tel"/></td>
                                    	<td><s:property value="atl"/></td>
                                    	<td><s:date name="analysis_date" format="yyyy-MM-dd"/></td>
                                    	<td><s:date name="report_date" format="yyyy-MM-dd"/></td>
                                    	<td><button class="btn bgm-amber" onclick="showDetail(<s:property value='id'/>)"><i class="zmdi zmdi-menu"></i></button></td>
                                    	<td><button class="btn bgm-lightgreen" onclick="downloadFile('<s:property value="report_file_path"/>')"><i class="zmdi zmdi-format-valign-bottom"></i></button></td>
                                	</tr>
                                </s:iterator>
                                </tbody>
                            </table>
						</div>
						<div style="text-align:right;">
                    	<ul class="pagination">
                    			<s:if test='pageCurrent != 1'>
                                	<li><a href="javascript:pageJump(1)">首</a></li>
                                </s:if>
                                <s:else>
                                	<li class="disabled"><a href="javascript:void()">首</a></li>
                                </s:else>
                                <s:if test='pageCurrent-2 >= 1'>
                                	<li><a href="javascript:pageJump(<s:property value='pageCurrent-2' />)"><s:property value='pageCurrent-2' /></a></li>
                                </s:if>
                                <s:if test='pageCurrent-1 >= 1'>
                                	<li><a href="javascript:pageJump(<s:property value='pageCurrent-1' />)"><s:property value='pageCurrent-1' /></a></li>
                                </s:if>
                                <li class="active"><a href="javascript:void()"><s:property value='pageCurrent' /></a></li>
                                <s:if test='pageCurrent+1 <= pageMax'>
                                	<li><a href="javascript:pageJump(<s:property value='pageCurrent+1' />)"><s:property value='pageCurrent+1' /></a></li>
                                </s:if>
                                <s:if test='pageCurrent+2 <= pageMax'>
                                	<li><a href="javascript:pageJump(<s:property value='pageCurrent+2' />)"><s:property value='pageCurrent+2' /></a></li>
                                </s:if>
                                <s:if test='pageCurrent != pageMax'>
                                	<li><a href="javascript:pageJump(<s:property value='pageMax' />)">尾</a></li>
                                </s:if>
                                <s:else>
                                	<li class="disabled"><a href="javascript:void()">尾</a></li>
                                </s:else>
                        </ul>
                        </div>
					</div>
				</div>
			</div>
		</section>
	</section>

	<%@ include file="../footer.jsp"%>


	<!-- Javascript Libraries -->

	<script
		src="<%=path%>/vendors/bower_components/jquery/dist/jquery.min.js"></script>
	<script
		src="<%=path%>/vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

	<script
		src="<%=path%>/vendors/bower_components/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js"></script>
	<script
		src="<%=path%>/vendors/bower_components/Waves/dist/waves.min.js"></script>
	<script src="<%=path%>/vendors/bootstrap-growl/bootstrap-growl.min.js"></script>
	<script
		src="<%=path%>/vendors/bower_components/sweetalert2/dist/sweetalert2.min.js"></script>
	<script src="<%=path%>/js/es6-promise.auto.js"></script>
	<script
		src="<%=path%>/vendors/bower_components/moment/min/moment.min.js"></script>
	<script
		src="<%=path%>/vendors/bower_components/autosize/dist/autosize.min.js"></script>
	<script
		src="<%=path%>/vendors/bower_components/chosen/chosen.jquery.js"></script>
	<script src="<%=path%>/vendors/fileinput/fileinput.js"></script>
	<script src="<%=path%>/js/jquery.datetimepicker.js"></script>
	<!-- Placeholder for IE9 -->
	<!--[if IE 9 ]>
            <script src="<%=path%>/vendors/bower_components/jquery-placeholder/jquery.placeholder.min.js"></script>
        <![endif]-->
	<script src="<%=path%>/js/app.js"></script>
	<script>
		jQuery(document).ready(function() {
			$('#datepicker_start').datetimepicker({
				lang:'ch',
				timepicker:false,
				format:'Y-m-d'
			});
			
			$('#datepicker_end').datetimepicker({
				lang:'ch',
				timepicker:false,
				format:'Y-m-d'
			});
		});
		function pageJump(p){
			$('#pCurrent').val(p);
			$('#form-query').attr("action","<%=path%>/telo!searchItem.action");
			$('#form-query').submit();
		};
		function showDetail(pid){
			location = "<%=path%>/telo!showDetail.action?tort.id=" + pid;
		};
		function downloadFile(f){
			fn=escape(encodeURIComponent(f));
			location = "<%=path%>/telo!dowloadFile.action?download=" + fn;
		};
	</script>
</body>
</html>